---
title: Bubble Background
description: An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-backgrounds-bubble" />

## Installation

<ComponentInstallation name="components-backgrounds-bubble" />

## Usage

```tsx
<BubbleBackground />
```

## API Reference

### BubbleBackground

<TypeTable
  type={{
    interactive: {
      description: 'Whether the background is interactive with mouse movement.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    transition: {
      description: 'The transition of the background.',
      type: 'SpringOptions',
      required: false,
      default: '{ stiffness: 100, damping: 20 }',
    },
    colors: {
      description: 'The colors of the background.',
      type: 'BubbleColors',
      required: false,
      default:
        '{ first: "18,113,255", second: "221,74,255", third: "0,220,255", fourth: "200,50,50", fifth: "180,180,50", sixth: "140,100,255" }',
    },
    '...props': {
      description: 'The props of the BubbleBackground.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- Credits to [GlitchWorker](https://codepen.io/glitchworker/pen/jENZGOV) for the inspiration
